<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .tips-text {
            color: #999;
            line-height: 20px;
        }

        .layui-table-cell {
            height: auto !important;
            white-space: normal;
            overflow: visible;
        }

        .layui-form-item {
            margin-bottom: 0;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-form layuimini-form">
        <table class="layui-table">
            <colgroup>
                <col width="30%">
                <col width="70%">
            </colgroup>
            <tbody>
            <tr>
                <td>代理商品</td>
                <td><span id="goodsName"></span></td>
            </tr>
            <tr>
                <td>团购状态</td>
                <td id="status"></td>
            </tr>
            <tr>
                <td>订单总数</td>
                <td><span id="customerNum"></span></td>
            </tr>
            <tr>
                <td>累计销量</td>
                <td><span id="usedQuantity"></span></td>
            </tr>
            <tr>
                <td>代理销售佣金(元)</td>
                <td><span id="distributionReward"></span></td>
            </tr>
            <tr>
                <td>实际收入(元)</td>
                <td><span id="actualIncome"></span></td>
            </tr>
            <tr class="addOrderData">
                <td colspan="2" class="tips-text">
                    新增商品订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*温馨提示：提交后立即更新代理销售详情，推广员同步更新数据，该操作不可撤回！
                </td>
            </tr>
            <tr class="addOrderData">
                <td>新增订单</td>
                <td>
                    <input type="text" name="newOrder" lay-verify="required|amount" placeholder="请填写新增的订单数"
                           autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr class="addOrderData">
                <td>新增销量</td>
                <td>
                    <input type="text" name="newSales" lay-verify="required|amount|greaterThanOrder"
                           placeholder="请填写新增的销量"
                           autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr class="addOrderData">
                <td>新增收入</td>
                <td>
                    <input type="text" name="newIncome" readonly placeholder="自动计算" autocomplete="off"
                           class="layui-input">
                </td>
            </tr>
            <tr class="addOrderData">
                <td colspan="2">
                    <button class="layui-btn" lay-submit lay-filter="submitBtn">提交</button>
                    <button type="button" class="layui-btn layui-btn-primary">关闭</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../lib/common/common.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script>
    let id = ''
    // 累计销量
    let usedQuantityNum = 0;
    // 订单总数/参与团购人数
    let customerNum = 0;
    // 代理销售佣金(元)
    let distributionRewardNum = 0.00;
    window.onload = function () {
        // 初始化推广员
        id = GetQueryString("id");
        if (isNotNull(id)) {
            init(id);
        } else {
            layer.msg('数据异常，请重试');
            setTimeout(function () {
                let iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);
            }, 1500);
        }
    }

    function init(id) {
        let data = {
            id: id
        }
        $.ajax({
            type: "POST",
            url: '/buying/queryById',
            data: JSON.stringify(data),
            dataType: 'json',
            contentType: 'application/json; charset=UTF-8',
            success: function (req) {
                if (req.code === '200') {
                    let data = req.data;
                    // 设置值反显
                    let goodsName = data.goodsName + "(" + data.goodsNo + ")"
                    $("#goodsName").text(goodsName)
                    let statusHtml = '';
                    if (data.status === '2') {
                        statusHtml = '<span style="color: red">已结束</span>'
                        $('.addOrderData').css('display', 'none');
                    } else if (data.status === '1') {
                        statusHtml = '<span style="color: #1fe711">进行中</span>'
                    }
                    $("#status").html(statusHtml)
                    customerNum = parseInt(isNotNull(data.customerNum) ? data.customerNum : 0);
                    $("#customerNum").text(customerNum);
                    let usedQuantity = isNotNull(data.usedQuantity) ? data.usedQuantity : 0.00;
                    usedQuantityNum = parseInt(usedQuantity)
                    $("#usedQuantity").text(usedQuantityNum)
                    let distributionReward = isNotNull(data.distributionReward) ? data.distributionReward : 0.00;
                    distributionRewardNum = parseFloat(distributionReward).toFixed(2);
                    $("#distributionReward").text(distributionRewardNum);
                    let actualIncome = usedQuantityNum * distributionRewardNum
                    $("#actualIncome").text(actualIncome.toFixed(2))
                } else {
                    layer.msg(req.msg);
                    setTimeout(function () {
                        let iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                    }, 1500);
                }
            },
            error: function (e) {
                layer.msg("数据有误");
            }
        })
    }

    layui.use(['form'], function () {
        var form = layui.form;

        // 自定义金额校验规则
        form.verify({
            amount: function (value, item) {
                if (!/^\d+(\.\d{0,2})?$/.test(value)) {
                    return '请输入正确的金额';
                }
            },
            greaterThanOrder: function (value, item) {
                var newOrder = parseFloat($("input[name='newOrder']").val());
                var newSales = parseFloat(value);
                if (newSales < newOrder) {
                    return '新增销量必须大于新增订单';
                }
            }
        });

        // 表单提交事件
        form.on('submit(submitBtn)', function (data) {
            // 处理提交逻辑
            let newOrder = parseInt(data.field.newOrder);
            let newSales = parseInt(data.field.newSales);
            let index = layer.alert("确定提交吗？", {
                title: '提示'
            }, function () {
                let data = {
                    id: id,
                    customerNum: newOrder,
                    usedQuantity: newSales
                }
                let myMsg = layer.msg("正在提交...", {
                    icon: 16,
                    time: -1
                })
                $.ajax({
                    type: "post",
                    url: '/buying/update/group/buying',
                    data: JSON.stringify(data),
                    dataType: 'json',
                    contentType: 'application/json; charset=UTF-8',
                    success: function (req) {
                        if (req.code === '200') {
                            layer.msg("操作成功");
                            layer.close(index);
                            // 关闭弹出层
                            setTimeout(function () {
                                layer.close(myMsg);//手动关闭
                                let iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);
                                // 调用父页面的方法
                                let parentWindow = window.parent;
                                parentWindow.reloadTable();
                            }, 1500);
                        } else {
                            layer.msg(req.msg);
                        }
                    },
                    error: function (e) {
                        layer.msg(e.msg);
                        layer.close(myMsg);//手动关闭
                    }
                })

            });
            return false; // 阻止表单提交
        });

        // 监听新增销量输入框的变化
        $("input[name='newSales']").on('input', function () {
            var newSales = parseFloat($(this).val());
            var newIncome = distributionRewardNum * newSales;
            $("input[name='newIncome']").val(isNaN(newIncome) ? "" : newIncome.toFixed(2));
        });

        // 关闭按钮点击事件
        $(".layui-btn-primary").on('click', function () {
            let iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);
        });
    });
</script>
</body>
</html>
